<template>
  <div v-if="visible" class="modal-overlay" @click.self="handleClose">
    <div class="modal-container">
      <div class="modal-header">
        <h2>系统配置</h2>
        <button class="close-btn" @click="handleClose">&times;</button>
      </div>
      
      <div class="modal-body">
        <!-- 数据库配置 -->
        <div class="config-section">
          <h3>数据库配置</h3>
          <div class="form-group">
            <label>数据库地址</label>
            <input 
              v-model="dbConfig.host" 
              type="text" 
              placeholder="localhost"
              class="form-input"
            >
          </div>
          <div class="form-group">
            <label>端口</label>
            <input 
              v-model.number="dbConfig.port" 
              type="number" 
              placeholder="3306"
              class="form-input"
            >
          </div>
          <div class="form-group">
            <label>用户名</label>
            <input 
              v-model="dbConfig.username" 
              type="text" 
              placeholder="root"
              class="form-input"
            >
          </div>
          <div class="form-group">
            <label>密码</label>
            <input 
              v-model="dbConfig.password" 
              type="text" 
              placeholder="请输入密码"
              class="form-input"
            >
          </div>
          <div class="form-group">
            <label>数据库名</label>
            <input 
              v-model="dbConfig.database" 
              type="text" 
              placeholder="选填，可在SQL中指定"
              class="form-input"
            >
          </div>
          <button class="test-btn" @click="testConnection">测试连接</button>
        </div>
        
        <!-- 氧屋平台配置 -->
        <div class="config-section">
          <h3>氧屋第三方平台配置</h3>
          <div class="form-group">
            <label>平台URL根路径</label>
            <input 
              v-model="platformConfig.baseUrl" 
              type="text" 
              placeholder="https://api.yangwudongxi.com"
              class="form-input"
            >
          </div>
          <div class="form-group">
            <label>Authorization</label>
            <input 
              v-model="platformConfig.authorization" 
              type="text" 
              placeholder="Bearer token..."
              class="form-input"
            >
          </div>
        </div>
        
        <!-- 系统配置 -->
        <div class="config-section">
          <h3>系统配置</h3>
          <div class="form-group checkbox-group">
            <label class="checkbox-label">
              <input 
                type="checkbox" 
                v-model="systemConfig.autoExecuteSelectAfterParse"
                class="checkbox-input"
              >
              <span class="checkbox-text">解析SQL语句后，默认执行查询操作</span>
            </label>
            <div class="checkbox-description">
              启用后，解析SQL时将自动执行所有SELECT类型的语句，无需手动点击查询按钮
            </div>
          </div>
        </div>
      </div>
      
      <div class="modal-footer">
        <button class="btn btn-cancel" @click="handleClose">取消</button>
        <button class="btn btn-save" @click="handleSave">保存配置</button>
      </div>
    </div>
  </div>
</template>

<script>
import configManager from '../utils/config'
import api from '../utils/api'

export default {
  name: 'ConfigModal',
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dbConfig: {
        host: 'localhost',
        port: 3306,
        username: 'root',
        password: '',
        database: ''
      },
      platformConfig: {
        baseUrl: '',
        authorization: ''
      },
      systemConfig: {
        autoExecuteSelectAfterParse: false
      }
    }
  },
  
  mounted() {
    // 组件加载时也要加载配置，以防万一
    this.loadConfig()
  },
  watch: {
    visible(newVal) {
      if (newVal) {
        this.loadConfig()
      }
    }
  },
  methods: {
    loadConfig() {
      // 加载数据库配置
      const savedDbConfig = configManager.getDbConfig()
      this.dbConfig = { ...this.dbConfig, ...savedDbConfig }
      
      // 加载平台配置
      const savedPlatformConfig = configManager.getPlatformConfig()
      this.platformConfig = { ...this.platformConfig, ...savedPlatformConfig }
      
      // 加载系统配置
      const savedSystemConfig = configManager.getSystemConfig()
      this.systemConfig = { ...this.systemConfig, ...savedSystemConfig }
    },
    
    async testConnection() {
      if (!this.dbConfig.host || !this.dbConfig.username || !this.dbConfig.password) {
        alert('请填写数据库地址、用户名和密码')
        return
      }
      
      try {
        await api.testConnection(this.dbConfig)
        alert('数据库连接成功！')
      } catch (error) {
        alert('数据库连接失败：' + error.message)
      }
    },
    
    handleSave() {
      // 保存配置
      configManager.setDbConfig(this.dbConfig)
      configManager.setPlatformConfig(this.platformConfig)
      configManager.setSystemConfig(this.systemConfig)
      
      this.$emit('saved')
      this.handleClose()
      alert('配置已保存')
    },
    
    handleClose() {
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-container {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal-header {
  padding: 20px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h2 {
  margin: 0;
  color: #1f2937;
  font-size: 1.5em;
}

.close-btn {
  background: none;
  border: none;
  font-size: 28px;
  color: #6b7280;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-btn:hover {
  color: #374151;
}

.modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.config-section {
  margin-bottom: 30px;
  padding: 20px;
  background: #f9fafb;
  border-radius: 8px;
}

.config-section h3 {
  margin: 0 0 20px 0;
  color: #374151;
  font-size: 1.2em;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  color: #4b5563;
  font-weight: 500;
}

.form-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.2s;
}

.form-input:focus {
  outline: none;
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.test-btn {
  background: #10b981;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s;
}

.test-btn:hover {
  background: #059669;
}

.modal-footer {
  padding: 20px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.btn {
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-cancel {
  background: white;
  color: #4b5563;
  border: 1px solid #d1d5db;
}

.btn-cancel:hover {
  background: #f3f4f6;
}

.btn-save {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  color: white;
  border: none;
}

.btn-save:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

/* 复选框样式 */
.checkbox-group {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 15px;
  background: #f9fafb;
}

.checkbox-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 500;
  color: #374151;
}

.checkbox-input {
  margin-right: 10px;
  transform: scale(1.2);
  cursor: pointer;
}

.checkbox-text {
  user-select: none;
}

.checkbox-description {
  margin-top: 8px;
  font-size: 12px;
  color: #6b7280;
  line-height: 1.4;
  padding-left: 22px;
}
</style>